<template>
  <van-form @submit="onSubmit">
    <van-row>
      <van-col :span="24">
        <van-field v-model.trim="form.title" name="title" label="标题" placeholder="标题"
          :rules="[{ required: true, message: '请填写标题' }]" />
      </van-col>
    </van-row>
    <van-row>
      <van-col :span="24">
        <van-field v-model.trim="form.description" rows="3" autosize show-word-limit maxlength="300" label="描述"
          type="textarea" placeholder="请输入描述" />
      </van-col>
    </van-row>

    <van-row>
      <van-col :span="24">
        <van-field name="rate" label="等级">
          <template #input>
            <van-rate v-model="form.level" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row>
      <van-col :span="24">
        <van-field name="uploader" label="图品上传">
          <template #input>
            <van-uploader v-model="form.fileList" multiple :after-read="afterread" />
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row>
      <van-col :span="24">
        <van-field readonly clickable name="endDate" :value="form.endDate" label="截至日期" placeholder="点击选择日期"
          @click="form.showEndDate = true" />
        <van-calendar v-model="form.showEndDate" @confirm="onConfirmEndDate" />
      </van-col>
    </van-row>
    <van-row>
      <van-col :span="24">
        <van-field readonly clickable name="appointUser" :value="appointUser" label="指派用户" placeholder="请选择用户"
          @click="showPicker = true" />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="columns" @confirm="onConfirmAppointUser" @cancel="showPicker = false" />
        </van-popup>
      </van-col>
    </van-row>
    <van-row class="foot">
      <van-col :span="24">
        <van-button round block type="info" native-type="submit" :loading="loading">
          提交
        </van-button>
      </van-col>
    </van-row>
    </van-row>
  </van-form>
</template>

<script>
  import {
    Form,
    Field,
    Button,
    Rate,
    Uploader,
    Calendar,
    Toast,
    Row,
    Col,
    Picker,
    Popup
  } from 'vant';
  export default {
    description: "任务",
    name: "task",
    components: {
      'van-col': Col,
      'van-row': Row,
      'van-form': Form,
      'van-field': Field,
      'van-button': Button,
      'van-rate': Rate,
      'van-uploader': Uploader,
      'van-calendar': Calendar,
      'van-picker': Picker,
      'van-popup': Popup
    },
    data: function () {
      return {
        form: {
          title: "", //标题,
          description: "", //描述
          level: 0, //等级
          fileList: [], //上传的文件集合
          file: [], //提交的文件
          endDate: "", //截至日期
          showEndDate: false, //是否显示日期
          appointUserName: '', //指派的用户账号
        },
        loading: false, //按钮的加载状态
        columns: [], //指派的用户信息
        showPicker: false, //是否显示选择器
        appointUser: '', //指派的用户名称
      }
    },
    methods: {
      //提交
      async onSubmit() {
        this.loading = true;
        var res = await this.$ajax.post('/api/task', {
          "title": this.form.title,
          "description": this.form.description,
          "level": this.form.level,
          "fileList": this.form.file,
          "endDate": this.form.endDate,
          "createUser": this.$user.getUserName(),
          appointUser: this.form.appointUserName
        });
        this.loading = false;
        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          Toast.success('新增成功');
          this.$router.push({
            name: "tasklist"
          });
        }
      },
      //确认截至日期
      onConfirmEndDate(date) {
        this.form.endDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        this.form.showEndDate = false;
      },
      //上传
      async afterread(file) {
        var timestamp=new Date().getTime()
        var res = await this.$ajax.uploadFile(this.$config.fileServer+`tmp/${timestamp}${file.file.name}`, file.file);
        //更新文件
        this.form.file.push(`${this.$config.fileServer}${res.requestPath}`);
      },
      onConfirmAppointUser(obj) {
        this.form.appointUserName = obj.value;
        this.appointUser = obj.text;
        this.showPicker = false;
      },
      //加载指派的用户数据
      async loadAppointUser() {
        var res = await this.$ajax.get(`/api/organization/user?oid=${ this.$user.getOrganizationId()}`);
        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          this.columns = [...res.data].map(item => {
            return {
              text: item.name,
              value: item.userName,
            }
          });
        }
      }
    },
    async mounted() {
      //显示底部栏
      this.$store.commit('updateShowFoot', true)
      this.$eventBus.publish('connectionSocket');
      //更改页面底部的状态
      this.$store.commit('updatetTabberActive', 'task')
      await this.loadAppointUser();
    }
  }

</script>

<style scoped>
  .foot {
    margin-top: 10px;
  }

</style>
